<template>
  <div>
    <h1>商品列表 (^з^)-☆</h1><hr>
    <div style="padding-right: 1900px">
    <el-button @click="dbexport"  type="primary" size="small">导出excel</el-button>
    </div>
    <el-table
        :data="tableData"
        :row-class-name="tableRowClassName">
      <el-table-column type="expand">
        <template v-slot="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="手机扫码查看详情">
              <!-- 二维码 -->
              <div class="code">
                <img :src="img"/>
              </div>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          fixed
          prop="cropNumbering"
          label="商品编号"
          width="190">
      </el-table-column>
      <el-table-column
          prop="cropName"
          label="商品名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="price"
          label="金额"
          width="120">
      </el-table-column>
      <el-table-column
          prop="num"
          label="库存"
          width="120">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="上架时间"
          width="220">
      </el-table-column>
      <el-table-column
          label="操作"
          width="190">
        <template slot-scope="scope">
<!--          <el-button @click="buyGoods(scope.row.id)" type="primary" size="small">购买</el-button>-->
          <el-button @click="toAddCart(scope.row.id)"  type="success" size="small">加入购物车</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--分页-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="goods.pageNum"
          :page-sizes="pageSizes"
          :page-size="goods.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import AraleQRCode from "arale-qrcode";
export default {
  name: "GoodsView",
  data() {
    return {
      tableData: [],
      a: '',
      total: 0,
      pageSizes: [1, 2, 3, 4],
      goods: {
        pageNum: 1,
        pageSize: 1,
      },
      sysMakeCode:'',
      cropNumbering:'',
      img:''
    }
  }, methods: {
    goodsList() {
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/goodsList", this.goods).then(res => {
        this.tableData = res.data.list;
        this.tableData.forEach(item => {
          //item.img = localStorage.getItem("image" + item.cropNumbering);
          //console.log("二维码地址" + item.img);
          console.log("image" + item.cropNumbering);
          this.getByMakeCropNumbering(item.cropNumbering)
        })
        console.log("=====" + JSON.stringify(res.data.list));
        this.total = res.data.total;
        this.goods.pageNum = res.data.pageNum;
        this.goods.pageSize = res.data.pageSize;
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },/*加入购物车*/
    toAddCart(id) {
      let userId = localStorage.getItem("userId");
      this.axios.post("http://172.20.10.5:8003/api/tb-cart/toAddCart?id=" + id + "&userId=" + userId).then(res => {
        if (res.data == "success") {
          this.$message.success("加入购物车成功");
          this.goodsList();
        } else {
          this.$message.error("库存不足")
        }
      })
    }, handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.goods.pageSize = val;
      this.goodsList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.goods.pageNum = val
      this.goodsList();
    },/*导出excel*/
    dbexport() {
      location.href = "http://172.20.10.5:8003/api/sts-test/exportExcel4";
    },getByMakeCropNumbering(cropNumbering){
        this.axios.post("http://172.20.10.5:8003/api/pay-plan/getByMakeCropNumbering?cropNumbering="+cropNumbering).then(res=>{
          console.log("getByMakeCropNumbering==="+res.data)
          this.sysMakeCode=res.data.addr
          this.cropNumbering=res.data.cropNumbering
          console.log("wwwww===="+this.cropNumbering)
          console.log(JSON.stringify(this.sysMakeCode));
          this.makeCode(this.sysMakeCode)
        })
    },
    //生成二维码方法
      makeCode(sysMakeCode) {
        const result = new AraleQRCode({
          render: "svg",      // 定义生成的类型 'svg' or 'table dom’
          text: sysMakeCode, // 二维码的链接
          size: 150,      //二维码大小
        });
        // 将svg xml文档转换成字符串
        const svgXml = new XMLSerializer().serializeToString(result);

        // 将svg字符串转成base64格式，通过 window.btoa方法创建一个 base-64 编码的字符串，进行二次编码解码(encodeURIComponent 字符串进行编码和解码，unescape 进行解码)。
        const src =
            "data:image/svg+xml;base64," +
            window.btoa(unescape(encodeURIComponent(svgXml)));

        // 本地存储图片
        localStorage.setItem("image"+this.cropNumbering, src);
        this.getImg(this.cropNumbering);
      },

      //获取存储的图片给到页面
      getImg(a) {
        //console.log("111"+cropNumbering)
        this.img = localStorage.getItem("image"+a);
        console.log("$$$$", this.img);
        //localStorage.removeItem("image"+cropNumbering);
      },

    }, created() {
      this.goodsList();

    }
  }

</script>

<style scoped>
.sppp {
  background-color: rgba(0, 0, 0, 0); /* 黑色透明背景 */
}

.el-table .success-row {
  background: #f0f9eb;
}

</style>